let apiNav = document.querySelectorAll('.api-nav')
let input = document.querySelector('#searchInp')
let span = document.querySelector('.api-title span')
/* //需求：点击api-nav时渲染内容
apiNav.forEach(function (v, i) {
    v.addEventListener('click', function () {
        span.textContent = v.textContent
        input.value = v.textContent
    })
}) */


// 模拟服务器上的传递过来的数据
let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
]

let apiLink = document.querySelector('.api-link')
//保存组装好的数据
let apiHtml = ''
apiTypeData.forEach(function (v) {    //遍历apiTypeData
    apiHtml = apiHtml + `<a href="#" class="api-nav ${v.isnew ? 'isnew' : ''}" 
    data-keyword="${v.keyword}" >
        ${v.name}
    </a>
    `
    //
    apiLink.innerHTML = apiHtml

})


let cuirType = document.querySelector('.curType')
apiLink.addEventListener('click', function (e) {
    //cuirType.textContent=e.target.textContent
    // console.log(e.target.nodeName);
    if (e.target.nodeName == 'A') {
        cuirType.textContent = e.target.textContent
        input.placeholder = e.target.dataset.keyword
    }
})









//回到顶部
let stop = document.querySelector('.stop')
window.addEventListener('scroll', function () {
    sTop = document.documentElement.scrollTop
    if (sTop >= 800) {
        stop.style.display = 'block'
    } else {
        stop.style.display = 'none'
    }
})
stop.addEventListener('click', function () {
    window.scrollTo({
        top: 0,
        behavior: "smooth"   //丝滑的回到顶部
    })
})

//需求：点击button显示蒙版
let btn = document.querySelector('.api-tab li button')
console.log(btn);
let mask = document.querySelector('.mask')
let apiTab = document.querySelector('.api-tab')
console.log(mask);
apiTab.addEventListener('click',function(e){
    if(e.target.nodeName=='BUTTON'){
        mask.style.display='block'
    }else{
        location.href='../page/API详情.html'
    }
})


//需求：点击屏幕任意位置隐藏蒙版
mask.addEventListener('click', function () {
    mask.style.display = 'none'
})
//点击里面的框框不会隐藏蒙版（阻止冒泡
let modal = document.querySelector('.mask-modal')
modal.addEventListener('click', function (e) {
    e.stopPropagation()
})

//事件委派：
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

]
let listHtml = ''

listDataArr.forEach(function (v) {
    listHtml = listHtml + `
        <li>
                <div class="api-tab-top">
                    <img src="../imgs/${v.img}" alt="">
                    <h3>${v.name}</h3>
                    <p class="${v.price=='免费'?'api-tab-money1':'api-tab-money2'}">${v.price}</p>
                </div>
               <span class="${v.isSpecial?'qiye':''}">企业专用</span>
                <button>申请数据</button>
            </li>

        `
    apiTab.innerHTML = listHtml


})






//需求：输入框为空的时候，不能提交
let text = document.querySelector('.mask-int input')
let pwd = document.querySelector('.mask-subint input')
let mbtn = document.querySelector('.mask-btn')
mbtn.addEventListener('click', function () {
    if (input.value === '') return
    if (pwd.value === '') return
})


//需求：判断手机和密码设置是否合法
let userMsg = document.querySelector('#userMsg')
let reg = /^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/
text.addEventListener('blur', function () {
    let bool = reg.test(text.value)
    if (bool == true) {
        userMsg.textContent = ''
    } else {

        userMsg.textContent = '请输入正确的电话号码'
    }
})

//判断密码是否合法
let pwdMsg = document.querySelector('#pwdMsg')
let reg1 = /^\d{6}$/
pwd.addEventListener('blur', function () {
    let bool = reg1.test(pwd.value)
    if (bool == true) {

        pwdMsg.textContent = ''
    } else {

        pwdMsg.textContent = '请输入正确的密码'
    }
})
//需求：当内容大于1时，出现隐藏精灵图点击精灵图清空内容
let img1 = document.querySelector('.mask-int img')
let img2 = document.querySelector('.mask-subint img')
text.addEventListener('input', function () {
    if (text.value.length > 0) {
        img1.style.display = 'block'
    } else {
        img1.style.display = 'none'
    }
})
img1.addEventListener('click', function () {
    text.value = ''
    img1.style.display = 'none'
})



pwd.addEventListener('input', function () {
    if (pwd.value.length > 0) {
        img2.style.display = 'block'
    } else {
        img2.style.display = 'none'
    }
})
img2.addEventListener('click', function () {
    pwd.value = ''
    img2.style.display = 'none'
})

//点击提交时判断密码和电话框
mbtn.addEventListener('click', function () {
    if (!reg.test(text.value)) {
        userMsg.textContent = '用户名错误'
    } else if (!reg1.test(pwd.value)) {
        pwdMsg.textContent = '密码错误'
    } else {
        location.href = '../page/首页.html'
    }
})

//点击扫码登陆时，。。。。
let dl3 = document.querySelector('.mask-dl3')
let dl1 = document.querySelector('.mask-dl1')
let zh = document.querySelector('.mask-zh')
let sm = document.querySelector('.mask-sm')
dl3.addEventListener('click', function () {
    dl3.style.borderBottom = '#1271ef 2px solid'
    dl3.style.color = '#1271ef'
    dl1.style.borderBottom = 'none'
    dl1.style.color = '#6666'
    zh.style.display = 'none'
    sm.style.display = 'block'

})

dl1.addEventListener('click', function () {
    dl1.style.borderBottom = '#1271ef 2px solid'
    dl1.style.color = '#1271ef'
    dl3.style.borderBottom = 'none'
    dl3.style.color = '#6666'
    zh.style.display = 'block'
    sm.style.display = 'none'
})

